<!-- A.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>A</title>
	</head>
	<style>
		body {
			border: 1px solid blue;
		}
	</style>

	<body>
		<!-- 
        我们想实现父页面A操控子页面A，B，并且让子页面和父页面交互，这里我们主要使用 iframe的
        contentWindow
        parent.window 通过 contentWindow ，我们可以拿到iframe内部的方法和dom元素，进而可以操控iframe页面
     -->

		<h1>A 页面</h1>
		<button onclick="send2B()">发消息给B</button>
		<div id="bridge"></div>
		<iframe src="./a1.html" id="a1" frameborder="0"></iframe>
		<script>
			// 父页面
			window.onmessage = function (e) {
				//接受返回数据
				console.log(e.data); //我不爱你
				// e.source.postMessage('我爱你', e.origin) //发送数据
			};
			function send2B() {
				document.querySelector('#a1').contentWindow.postMessage('我爱你', 'http://127.0.0.1:5500'); //发送数据
			}
		</script>
	</body>
</html>
